<template>
	<view class="category">
		<navigator v-for="item in dataList" :key="item.id" url="" class="category-item">
			<image :src="item.icon" mode=""></image>
			<text>{{item.name}}</text>
		</navigator>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style lang="scss">
	.category{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 20rpx;
		padding: 20rpx	0;
		min-height: 328rpx;
		.category-item{
			 width: 150rpx;
			 display: flex;
			 flex-direction: column;
			 justify-content: center;
			 align-items: center;
			 image{
				 width: 100rpx;
				 height: 100rpx;
			 }
			 text{
				  font-size: 26rpx;
				       color: #666;
			 }
		}
	}
</style>